<template>
  <div class="guess-you-like-wrapper">
    <div class="recommend-title">
      <span class="iconfont icon-heart">&#xe85c;</span>
      <span class="title-text">猜你喜欢</span>
    </div>
    <ul>
      <!-- 只要没有数据会改变的或是有打乱li的, 那么key可以尝试用index -->
      <!-- 用'tag属性可以默认这个变成不同的标签, 默认是a标签, 而且就算标签修改了, 也能跳转 -->
      <router-link 
        :to="'/detail/' + item.id"
        tag="li" 
        class="list-item" 
        v-for="item of guessYouLikeList" :key="item.id"> 
        <div class="item-img-box">
          <img class="item-img" :src="item.imgUrl" alt="" />
          <div class="item-img-tag">{{item.tag}}</div>
        </div> 
        <div class="item-info">
          <div class="inner-box">
            <div class="info-title">{{item.title}}</div>
            <div class="info-comment">
              <span class="iconfont icon-star">&#xe62b;</span>
              <span class="iconfont icon-star">&#xe62b;</span>
              <span class="iconfont icon-star">&#xe62b;</span>
              <span class="iconfont icon-star">&#xe62b;</span>
              <span class="iconfont icon-star">&#xe62b;</span>
              <span class="comment-num"> {{item.comment}}条评论</span>
            </div>
            <div class="info-price">
              <span class="price">￥<em>{{item.price}}</em></span>起
              <span class="district">{{item.district}}</span>
            </div>
          </div>
        </div>
        
      </router-link>
    </ul>
  </div>
  
</template>

<script>
export default {
  name: 'HomeGuessYouLike',
  props: {
    guessYouLikeList: [Array]
  },
  data: function() {
    return {
     
    }
  }
}
</script>

<style lang="stylus" scoped>
// stylus也能语法嵌套... 写到后面才发现... , 以后都用类嵌套了
@import '~@styles/variables.styl';
@import '~@styles/mixins.styl';

  div {
    box-sizing: border-box;
  }

  .recommend-title {
    
    width: 100%;
    height: .8rem;
    padding: 0 .1rem
    background-color: #999;
    line-height: .8rem;
    font-size: .32rem;
    
  }

  .recommend-title .icon-heart {
    color: #ff654d;
    margin-right: .1rem
  }

  .list-item {
    // display: flex;
    height: 2.4rem;
    // background-color: orange;
  }

  .list-item .item-img-box {
    float: left;
    position: relative;
    width: 2.4rem;
    height: 100%;
    // background-color: green;
    padding: .2rem;
  }

    .list-item .item-img-tag {
      position: absolute;
      top: .2rem;
      left: .2rem;
      width: 1.4rem;
      height: .38rem;
      background: url('~@assets/img/homeGuessYouLike/yellowTag.png') no-repeat 0 0/100% 100%;
      color: #fff;
      font-size: .28rem;
      line-height: .38rem;
      text-indent: .06rem;
    }

  .list-item .item-info {
    // flex: 1;
    float: left;
    width: 5.1rem;
    height: 100%;
    padding: .4rem .1rem;
    box-sizing: border-box;

    .inner-box {
      height: 100%;
      // background-color: blue;
      .info-title {
        width: 100%;
        height: .6rem;
        font-size: .32rem;
        line-height: .6rem;
        ellipsis();
      }

      .info-comment {
        
        .icon-star {
          color: #ffb436;
          font-size: .24rem;
          // vertical-align: center;
        }

        .comment-num {
          color: $lightTxtColor;
          font-size: .24rem;
          line-height: .4rem;
        }
      }
    }

    .info-price {
      // width: 100%
      height: .6rem;
      line-height: .6rem;
      color: $lightTxtColor;

      .price {
        color: #ff8300;

        em {
          font-size: .4rem;
        }
      }

      .district {
        float: right;
        margin-right: .2rem;  
      }

    }


  }

  // .list-item .item-info 

</style>